<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  
  <title>Hexo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="第十六章HTML和CSSHTML概念介绍  概念：是最基础的网页开发语言   Hyper Text Markup Language 超文本标记语言   超文本:   超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.        标记语言:   由标签构成的语言。&lt;标签名称&gt; 如 html，xml    标记语言不是编程语言。                快速入">
<meta property="og:type" content="article">
<meta property="og:title" content="Hexo">
<meta property="og:url" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AD%E7%AB%A0HTML%E5%92%8CCSS/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:description" content="第十六章HTML和CSSHTML概念介绍  概念：是最基础的网页开发语言   Hyper Text Markup Language 超文本标记语言   超文本:   超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.        标记语言:   由标签构成的语言。&lt;标签名称&gt; 如 html，xml    标记语言不是编程语言。                快速入">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AD%E7%AB%A0HTML%E5%92%8CCSS/image/top_banner.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AD%E7%AB%A0HTML%E5%92%8CCSS/image/logo.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AD%E7%AB%A0HTML%E5%92%8CCSS/image/search.png">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AD%E7%AB%A0HTML%E5%92%8CCSS/image/hotel_tel.png">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AD%E7%AB%A0HTML%E5%92%8CCSS/image/banner_3.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AD%E7%AB%A0HTML%E5%92%8CCSS/image/icon_5.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AD%E7%AB%A0HTML%E5%92%8CCSS/image/jiangxuan_1.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AD%E7%AB%A0HTML%E5%92%8CCSS/image/jiangxuan_1.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AD%E7%AB%A0HTML%E5%92%8CCSS/image/jiangxuan_1.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AD%E7%AB%A0HTML%E5%92%8CCSS/image/jiangxuan_1.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AD%E7%AB%A0HTML%E5%92%8CCSS/image/icon_6.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AD%E7%AB%A0HTML%E5%92%8CCSS/image/guonei_1.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AD%E7%AB%A0HTML%E5%92%8CCSS/image/jiangxuan_2.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AD%E7%AB%A0HTML%E5%92%8CCSS/image/jiangxuan_2.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AD%E7%AB%A0HTML%E5%92%8CCSS/image/jiangxuan_2.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AD%E7%AB%A0HTML%E5%92%8CCSS/image/jiangxuan_2.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AD%E7%AB%A0HTML%E5%92%8CCSS/image/jiangxuan_2.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AD%E7%AB%A0HTML%E5%92%8CCSS/image/jiangxuan_2.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AD%E7%AB%A0HTML%E5%92%8CCSS/image/icon_7.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AD%E7%AB%A0HTML%E5%92%8CCSS/image/jiangwai_1.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AD%E7%AB%A0HTML%E5%92%8CCSS/image/jiangxuan_3.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AD%E7%AB%A0HTML%E5%92%8CCSS/image/jiangxuan_3.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AD%E7%AB%A0HTML%E5%92%8CCSS/image/jiangxuan_3.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AD%E7%AB%A0HTML%E5%92%8CCSS/image/jiangxuan_3.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AD%E7%AB%A0HTML%E5%92%8CCSS/image/jiangxuan_3.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AD%E7%AB%A0HTML%E5%92%8CCSS/image/jiangxuan_3.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AD%E7%AB%A0HTML%E5%92%8CCSS/image/footer_service.png">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AD%E7%AB%A0HTML%E5%92%8CCSS/img/verify_code.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AD%E7%AB%A0HTML%E5%92%8CCSS/img/verify_code.jpg">
<meta property="article:published_time" content="2021-12-19T17:34:41.500Z">
<meta property="article:modified_time" content="2021-12-19T17:34:41.501Z">
<meta property="article:author" content="John Doe">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AD%E7%AB%A0HTML%E5%92%8CCSS/image/top_banner.jpg">
  
    <link rel="alternate" href="/notes-on-computer-expertise/atom.xml" title="Hexo" type="application/atom+xml">
  
  
    <link rel="shortcut icon" href="/notes-on-computer-expertise/favicon.png">
  
  
    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/typeface-source-code-pro@0.0.71/index.min.css">

  
  
<link rel="stylesheet" href="/notes-on-computer-expertise/css/style.css">

  
    
<link rel="stylesheet" href="/notes-on-computer-expertise/fancybox/jquery.fancybox.min.css">

  
<meta name="generator" content="Hexo 5.4.0"></head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/notes-on-computer-expertise/" id="logo">Hexo</a>
      </h1>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/notes-on-computer-expertise/">Home</a>
        
          <a class="main-nav-link" href="/notes-on-computer-expertise/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/notes-on-computer-expertise/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="https://goofyer.gitee.io/notes-on-computer-expertise"></form>
      </div>
    </div>
  </div>
</header>

      <div class="outer">
        <section id="main"><article id="post-Java/第十六章HTML和CSS" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AD%E7%AB%A0HTML%E5%92%8CCSS/" class="article-date">
  <time class="dt-published" datetime="2021-12-19T17:34:41.500Z" itemprop="datePublished">2021-12-20</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <h2 id="第十六章HTML和CSS"><a href="#第十六章HTML和CSS" class="headerlink" title="第十六章HTML和CSS"></a>第十六章HTML和CSS</h2><h3 id="HTML概念介绍"><a href="#HTML概念介绍" class="headerlink" title="HTML概念介绍"></a>HTML概念介绍</h3><ul>
<li><ol>
<li><p>概念：是最基础的网页开发语言</p>
<ul>
<li><ul>
<li><p>Hyper Text Markup Language 超文本标记语言</p>
<ul>
<li><ul>
<li><p>超文本:</p>
<ul>
<li><ul>
<li>超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><ul>
<li><p>标记语言:</p>
<ul>
<li><ul>
<li>由标签构成的语言。&lt;标签名称&gt; 如 html，xml</li>
</ul>
</li>
<li><ul>
<li>标记语言不是编程语言。</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ol>
</li>
<li><ol>
<li><p>快速入门：</p>
<ul>
<li><ul>
<li><p>语法：</p>
<ul>
<li><ol>
<li>html文档后缀名 .html 或者 .htm</li>
</ol>
</li>
<li><ol>
<li><p>标签分为</p>
<ul>
<li><ol>
<li>围堵标签：有开始标签和结束标签。如 <html> </html></li>
</ol>
</li>
<li><ol>
<li>自闭和标签：开始标签和结束标签在一起。如 <br/></li>
</ol>
</li>
</ul>
</li>
</ol>
</li>
<li><ol>
<li><p>标签可以嵌套：</p>
<ul>
<li>需要正确嵌套，不能你中有我，我中有你</li>
<li>错误：<a><b></a>&lt;/b&gt;</li>
<li>正确：<a><b></b></a></li>
</ul>
</li>
</ol>
</li>
<li><ol>
<li>在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来。</li>
</ol>
</li>
<li><ol>
<li>html的标签不区分大小写，但是建议使用小写。</li>
</ol>
</li>
</ul>
</li>
</ul>
</li>
<li><ul>
<li><p>代码：</p>
<ul>
<li><html>

<head>
<title>title</title>
</head>

<body>
<FONT color='red'>Hello World</font><br/>

<font color='green'>Hello World</font>

</body>

</li>
</ul>
<p>&lt;/html&gt;</p>
</li>
</ul>
</li>
</ul>
</li>
</ol>
</li>
</ul>
<h3 id="第2节-基本标签"><a href="#第2节-基本标签" class="headerlink" title="第2节 基本标签"></a>第2节 基本标签</h3><ul>
<li><ol>
<li><p>文件标签：构成html最基本的标签</p>
<ul>
<li><ul>
<li>html：html文档的根标签。</li>
</ul>
</li>
<li><ul>
<li>head：头标签，用于指定html文档的一些属性；引入外部的资源。</li>
</ul>
</li>
<li><ul>
<li>title：标题标签。</li>
</ul>
</li>
<li><ul>
<li>body：体标签。</li>
</ul>
</li>
<li><ul>
<li>&lt;!DOCTYPE html&gt;：html5中定义该文档是html文档。</li>
</ul>
</li>
</ul>
</li>
</ol>
</li>
<li><ol>
<li><p>文本标签：和文本有关的标签</p>
<ul>
<li><ul>
<li><p>属性：</p>
<ul>
<li><ul>
<li>注释：<!-- 注释内容 --></li>
</ul>
</li>
<li><ul>
<li><h1> to <h6>：标题标签,h1~h6:字体大小逐渐递减</li>
</ul>
</li>
<li><ul>
<li><p>：段落标签</li>
</ul>
</li>
<li><ul>
<li><br>：换行标签</li>
</ul>
</li>
<li><ul>
<li><hr>：展示一条水平线</li>
</ul>
</li>
<li><ul>
<li>color：颜色</li>
</ul>
</li>
<li><ul>
<li>width：宽度</li>
</ul>
</li>
<li><ul>
<li>size：高度</li>
</ul>
</li>
<li><ul>
<li><p>align：对齐方式</p>
<ul>
<li><ul>
<li>center：居中</li>
</ul>
</li>
<li><ul>
<li>left：左对齐</li>
</ul>
</li>
<li><ul>
<li>right：右对齐</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><ul>
<li><b>：字体加粗</li>
</ul>
</li>
<li><ul>
<li><i>：字体斜体</li>
</ul>
</li>
<li><ul>
<li><font>：字体标签</li>
</ul>
</li>
<li><ul>
<li><center>：文本居中</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><ul>
<li><p>属性：</p>
<ul>
<li><ul>
<li>color：颜色</li>
</ul>
</li>
<li><ul>
<li>size：大小</li>
</ul>
</li>
<li><ul>
<li>face：字体</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><ul>
<li><p>属性定义：</p>
<ul>
<li><ul>
<li><p>color：</p>
<ul>
<li><ol>
<li>英文单词：red、green、blue</li>
</ol>
</li>
<li><ol>
<li>rgb(值1，值2，值3)：值的范围：0~255，如：rgb(0,0,255)</li>
</ol>
</li>
<li><ol>
<li><h1 id="值1值2值3：值的范围：00-FF之间，如：-FF00FF"><a href="#值1值2值3：值的范围：00-FF之间，如：-FF00FF" class="headerlink" title="值1值2值3：值的范围：00~FF之间，如： #FF00FF"></a>值1值2值3：值的范围：00~FF之间，如： #FF00FF</h1></li>
</ol>
</li>
</ul>
</li>
</ul>
</li>
<li><ul>
<li><p>width：</p>
<ul>
<li><ol>
<li>数值：width=’20’ ,数值的单位，默认是 px(像素)</li>
</ol>
</li>
<li><ol>
<li>数值%：占比相对于父元素的比例</li>
</ol>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ol>
</li>
<li><ul>
<li><p>案例：公司简介</p>
<ul>
<li><p>&lt;!DOCTYPE html&gt;<br><html lang="ch"><br><head>
  <meta charset="UTF-8">
  <title>黑马程序员简介</title>
</head><br><body><br>  <header></p>
<pre><code>  &lt;div id=&quot;header&quot;&gt;
      &lt;h1&gt;
          公司简介
      &lt;/h1&gt;

  &lt;/div&gt;
</code></pre><p>  &lt;/header&gt;</p>
  <hr color="#ffd700">

  <p>
      <font color="#FF0000">"中关村黑马程序员训练营"</font>是由<b><i>传智播客</i></b>联合中关村软件园、CSDN，
      并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展， 而企业招不到优秀人才的困扰。
  </p>

  <p>
      目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地， 并被评为中关村软件园重点扶持人才企业。
  </p>

  <p>

      黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。 黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”，
      必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、 品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确
      保学员质量，并降低企业的用人风险。
      中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新， 不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。
  </p>

  <p>

      一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。
  </p>

<p>  <hr color="#ffd700"></p>
  <footer>

      <div id="footer">
          <font color="gray" size="2">
              <center>
                  江苏传智播客教育科技股份有限公司<br>
                  版权所有Copyright 2006-2018&copy;, All Rights Reserved 苏ICP备16007882
              </center>
          </font>
      </div>
  </footer>

</li>
</ul>
<p>&lt;/body&gt;<br>&lt;/html&gt;</p>
</li>
</ul>
</li>
<li><p>图片标签</p>
<ul>
<li>相对路径</li>
<li><p>相对路径</p>
<ul>
<li><ul>
<li><p>以.开头的路径</p>
<ul>
<li><ul>
<li>./：代表当前目录  ./image/1.jpg</li>
</ul>
</li>
<li><ul>
<li>../:代表上一级目录</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><p>列表标签</p>
<ul>
<li><p>有序列表：</p>
<ul>
<li>ol</li>
<li>li</li>
</ul>
</li>
<li><p>无序列表：</p>
<ul>
<li>ul</li>
<li>li</li>
</ul>
</li>
</ul>
</li>
<li><ol>
<li><p>链接标签：</p>
<ul>
<li><ul>
<li>a：定义一个超链接</li>
</ul>
</li>
<li><ul>
<li><p>属性：</p>
<ul>
<li><ul>
<li>href：指定访问资源的URL(统一资源定位符)</li>
</ul>
</li>
<li><ul>
<li><p>target：指定打开资源的方式</p>
<ul>
<li><ul>
<li>_self：默认值，在当前页面打开</li>
</ul>
</li>
<li><ul>
<li>_blank：在空白页面打开</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ol>
</li>
<li><p>表格标签：</p>
<ul>
<li><ul>
<li><p>table：定义表格</p>
<ul>
<li><ul>
<li>width：宽度</li>
</ul>
</li>
<li><ul>
<li>border：边框</li>
</ul>
</li>
<li><ul>
<li>cellpadding：定义内容和单元格的距离。</li>
</ul>
</li>
<li><ul>
<li>cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条。</li>
</ul>
</li>
<li><ul>
<li>bgcolor：背景色</li>
</ul>
</li>
<li><ul>
<li>align：对齐方式</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><p>案例</p>
<ul>
<li><p>&lt;!DOCTYPE html&gt;</p>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
  <tr>
      <!-- <td>编号</td>
      <td>姓名</td>
      <td>成绩</td>-->
      <th>编号</th>
      <th>姓名</th>
      <th>成绩</th>
  </tr>
  <tr>
      <td>1</td>
      <td>小龙女</td>
      <td>100</td>
  </tr>
  <tr>
      <td>2</td>
      <td>杨过</td>
      <td>50</td>
  </tr>
</table>
<hr>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
  <thead>
      <caption>学生信息表</caption>
      <tr>
          <!-- <td>编号</td>
           <td>姓名</td>
           <td>成绩</td>-->
          <th>编号</th>
          <th>姓名</th>
          <th>成绩</th>
      </tr>
  </thead>
  <tbody>
      <tr bgcolor="#7fffd4" align="center">
          <td>1</td>
          <td>小龙女</td>
          <td>100</td>
      </tr>
      <tr>
          <td>2</td>
          <td>杨过</td>
          <td>50</td>
      </tr>
  </tbody>
  <tfoot>
      <tr>
          <td>3</td>
          <td>老顽童</td>
          <td>10</td>
      </tr>
  </tfoot>
</table>
<hr>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
  <tr>
      <th rowspan="2">编号</th>
      <th>姓名</th>
      <th>成绩</th>
  </tr>

  <tr>
      <td>小龙女</td>
      <td>100</td>
  </tr>
  <tr>
      <td>2</td>
      <td colspan="2">杨过</td>
  </tr>
</table>
<hr>
</body>
</html>
</li>
</ul>
</li>
</ul>
</li>
<li><p>HTML标签_综合案例</p>
<ul>
<li><ol>
<li>确定使用table来完成布局（12行）</li>
</ol>
</li>
<li><ol>
<li>如果某一行只有一个单元格，则使用<tr><td></td></tr></li>
</ol>
</li>
<li><ol>
<li><p>如果某一行有多个单元格，则使用</p>
<ul>
<li><tr>
<td>
<table></table>
</td>
</tr>
</li>
</ul>
</li>
</ol>
</li>
<li><ol>
<li><p>代码实现 …</p>
<ul>
<li><p>&lt;!DOCTYPE html&gt;</p>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>黑马旅游网</title>
</head>
<body>
<!--采用table来完成布局-->
<!--最外层的table，用于整个页面的布局-->
<table width="100%" align="center">
 <!-- 第1行 -->
 <tr>
     <td>
         <img src="image/top_banner.jpg" width="100%" alt="">
     </td>
 </tr>

 <!-- 第2行 -->
 <tr>
     <td>
         <table width="100%" align="center">
             <tr>
                 <td>
                     <img src="image/logo.jpg" alt="">
                 </td>
                 <td>
                     <img src="image/search.png" alt="">
                 </td>
                 <td>
                     <img src="image/hotel_tel.png" alt="">
                 </td>
             </tr>
         </table>
     </td>
 </tr>

 <!-- 第3行 -->
 <tr>
     <td>
         <table width="100%" align="center">
             <tr bgcolor="#ffd700" align="center" height="45">
                 <td>
                     <a href="">首页</a>
                 </td>
                 <td>
                     门票
                 </td>
                 <td>
                     门票
                 </td>
                 <td>
                     门票
                 </td>
                 <td>
                     门票
                 </td>
                 <td>
                     门票
                 </td>
                 <td>
                     门票
                 </td>
                 <td>
                     门票
                 </td>
                 <td>
                     门票
                 </td>
                 <td>
                     门票
                 </td>
             </tr>
         </table>
     </td>
 </tr>

 <!-- 第4行 轮播图 -->
 <tr>
     <td>
         <img src="image/banner_3.jpg" alt="" width="100%">
     </td>
 </tr>

 <!-- 第5行 黑马精选-->
 <tr>
     <td>
         <img src="image/icon_5.jpg" alt="">
         黑马精选
         <hr color="#ffd700">
     </td>
 </tr>

 <!-- 第6行 -->
 <tr>
     <td>
         <table align="center" width="95%">
             <tr>
                 <td>
                     <img src="image/jiangxuan_1.jpg" alt="">
                     <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                     <font color="red">&yen; 899</font>
                 </td>
                 <td>
                     <img src="image/jiangxuan_1.jpg" alt="">
                     <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                     <font color="red">&yen; 899</font>
                 </td>
                 <td>
                     <img src="image/jiangxuan_1.jpg" alt="">
                     <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                     <font color="red">&yen; 899</font>
                 </td>
                 <td>
                     <img src="image/jiangxuan_1.jpg" alt="">
                     <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                     <font color="red">&yen; 899</font>
                 </td>
             </tr>
         </table>
     </td>
 </tr>

 <!-- 第7行 国内游 -->
 <tr>
     <td>
         <img src="image/icon_6.jpg" alt="">
         国内游
         <hr color="#ffd700">
     </td>
 </tr>

 <!-- 第8行 -->
 <tr>
     <td>
         <table align="center" width="95%">
             <tr>
                 <td rowspan="2">
                     <img src="image/guonei_1.jpg" alt="">
                 </td>
                 <td>
                     <img src="image/jiangxuan_2.jpg" alt="" height="100%">
                     <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                     <font color="red">&yen; 699</font>
                 </td>
                 <td>
                     <img src="image/jiangxuan_2.jpg" alt="">
                     <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                     <font color="red">&yen; 699</font>
                 </td>
                 <td>
                     <img src="image/jiangxuan_2.jpg" alt="">
                     <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                     <font color="red">&yen; 699</font>
                 </td>
             </tr>
             <tr>
                 <td>
                     <img src="image/jiangxuan_2.jpg" alt="">
                     <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                     <font color="red">&yen; 699</font>
                 </td>
                 <td>
                     <img src="image/jiangxuan_2.jpg" alt="">
                     <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                     <font color="red">&yen; 699</font>
                 </td>
                 <td>
                     <img src="image/jiangxuan_2.jpg" alt="">
                     <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                     <font color="red">&yen; 699</font>
                 </td>
             </tr>
         </table>
     </td>
 </tr>

 <!-- 第9行 境外游 -->
 <tr>
     <td>
         <img src="image/icon_7.jpg" alt="">
         境外游
         <hr color="#ffd700">
     </td>
 </tr>

 <!-- 第10行 -->
 <tr>
     <td>
         <table align="center" width="95%">
             <tr>
                 <td rowspan="2">
                     <img src="image/jiangwai_1.jpg" alt="">
                 </td>
                 <td>
                     <img src="image/jiangxuan_3.jpg" alt="" height="100%">
                     <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                     <font color="red">&yen; 699</font>
                 </td>
                 <td>
                     <img src="image/jiangxuan_3.jpg" alt="">
                     <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                     <font color="red">&yen; 699</font>
                 </td>
                 <td>
                     <img src="image/jiangxuan_3.jpg" alt="">
                     <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                     <font color="red">&yen; 699</font>
                 </td>
             </tr>
             <tr>
                 <td>
                     <img src="image/jiangxuan_3.jpg" alt="">
                     <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                     <font color="red">&yen; 699</font>
                 </td>
                 <td>
                     <img src="image/jiangxuan_3.jpg" alt="">
                     <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                     <font color="red">&yen; 699</font>
                 </td>
                 <td>
                     <img src="image/jiangxuan_3.jpg" alt="">
                     <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                     <font color="red">&yen; 699</font>
                 </td>
             </tr>
         </table>
     </td>
 </tr>

 <!-- 第11行 -->
 <tr>
     <td>
         <img src="image/footer_service.png" alt="" width="100%">
     </td>
 </tr>

 <!-- 第12行 -->
 <tr>
     <td align="center" bgcolor="#ffd700" height="40">
         <font color="gray" size="2">
             江苏传智播客教育科技股份有限公司
             版权所有Copyright 2006-2018&copy;, All Rights Reserved 苏ICP备16007882
         </font>
     </td>
 </tr>
</table>
</body>
</html>

</li>
</ul>
</li>
</ol>
</li>
</ul>
</li>
</ul>
<h3 id="第3节-表单标签"><a href="#第3节-表单标签" class="headerlink" title="第3节 表单标签"></a>第3节 表单标签</h3><ul>
<li><ul>
<li><p>表单：</p>
<ul>
<li><ul>
<li>概念：用于采集用户输入的数据的（用于和服务器进行交互）。</li>
</ul>
</li>
<li><ul>
<li><p>form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围。</p>
<ul>
<li><ul>
<li><p>属性：</p>
<ul>
<li><ul>
<li>action：指定提交数据的URL</li>
</ul>
</li>
<li><ul>
<li><p>method：指定提交方式</p>
<ul>
<li><ul>
<li><p>分类：一共7种，2种比较常用</p>
<ul>
<li><ul>
<li><p>get：</p>
<ul>
<li><ol>
<li>请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。</li>
</ol>
</li>
<li><ol>
<li>请求参数大小是有限制的。</li>
</ol>
</li>
<li><ol>
<li>不太安全。</li>
</ol>
</li>
</ul>
</li>
</ul>
</li>
<li><ul>
<li><p>post：</p>
<ul>
<li>1.请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)。</li>
<li><ol>
<li>请求参数的大小没有限制。</li>
</ol>
</li>
<li><ol>
<li>较为安全。</li>
</ol>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><ul>
<li>表单项中的数据要想被提交：必须指定其name属性。</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><p>&lt;!DOCTYPE html&gt;</p>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>表单标签</title>
</head>
<body>
  <form action="#" method="post">
      用户名：<input type="text" name="username"><br>
      密码：<input name="password"><br>
      <input type="submit" value="登录">
  </form>
</body>
</html>
</li>
</ul>
</li>
</ul>
</li>
<li><ul>
<li><p>表单项标签：</p>
<ul>
<li><ul>
<li><p>input：可以通过type属性值，改变元素展示的样式</p>
<ul>
<li><ul>
<li><p>type属性：</p>
<ul>
<li><ul>
<li><p>text：文本输入框，默认值</p>
<ul>
<li><ul>
<li>placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息    </li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><ul>
<li>password：密码输入框</li>
</ul>
</li>
<li><ul>
<li><p>radio:单选框</p>
<ul>
<li><ul>
<li><p>注意：</p>
<ul>
<li><ol>
<li>要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。</li>
</ol>
</li>
<li><ol>
<li>一般会给每一个单选框提供value属性，指定其被选中后提交的值</li>
</ol>
</li>
<li><ol>
<li>checked属性，可以指定默认值</li>
</ol>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><ul>
<li><p>checkbox：复选框</p>
<ul>
<li><ul>
<li><p>注意：</p>
<ul>
<li><ol>
<li>一般会给每一个单选框提供value属性，指定其被选中后提交的值。</li>
</ol>
</li>
<li><ol>
<li>checked属性，可以指定默认值。</li>
</ol>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><ul>
<li>file：文件选择框</li>
</ul>
</li>
<li><ul>
<li>hidden：隐藏域，用于提交一些信息。</li>
</ul>
</li>
<li><ul>
<li><p>按钮：</p>
<ul>
<li><ul>
<li>submit：提交按钮，可以提交表单</li>
</ul>
</li>
<li><ul>
<li>button：普通按钮</li>
</ul>
</li>
<li><ul>
<li><p>image：图片提交按钮</p>
<ul>
<li><ul>
<li>src属性指定图片的路径    </li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><ul>
<li><p>label：指定输入项的文字描述信息</p>
<ul>
<li><ul>
<li><p>注意：</p>
<ul>
<li><ul>
<li>label的for属性一般会和 input 的 id属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点。</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><ul>
<li><p>select: 下拉列表</p>
<ul>
<li><ul>
<li>子元素：option，指定列表项</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><ul>
<li><p>textarea：文本域</p>
<ul>
<li><ul>
<li>cols：指定列数，每一行有多少个字符</li>
</ul>
</li>
<li><ul>
<li>rows：默认多少行。</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><p>代码</p>
<ul>
<li>&lt;!DOCTYPE html&gt;<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form action="#" method="get">
<label for="username"> 用户名 </label>：<input type="text" name="username" placeholder="请输入用户名" id="username"><br>
密码：<input type="password" name="password" placeholder="请输入密码"><br>
性别：<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female" checked> 女
<br>
爱好：<input type="checkbox" name="hobby" value="shopping"> 逛街
<input type="checkbox" name="hobby" value="java" checked> Java
<input type="checkbox" name="hobby" value="game"> 游戏<br>
图片：<input type="file" name="file"><br>
隐藏域：<input type="hidden" name="id" value="aaa"> <br>
取色器：<input type="color" name="color"><br>
生日：<input type="date" name="birthday"> <br>
生日：<input type="datetime-local" name="birthday"> <br>
邮箱：<input type="email" name="email"> <br>
年龄：<input type="number" name="age"> <br>
省份：<select name="province">
  <option value="">--请选择--</option>
  <option value="1">北京</option>
  <option value="2">上海</option>
  <option value="3" selected>陕西</option>
</select><br>
自我描述：
<textarea cols="20" rows="5" name="des"></textarea>
<br>
<input type="submit" value="登录">
<input type="button" value="一个按钮"><br>
<input type="image" src="img/regbtn.jpg">
</form>
</body>
</html>
</li>
</ul>
</li>
<li><p>注册页面</p>
<ul>
<li>&lt;!DOCTYPE html&gt;<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
</head>
<body>
<!--定义表单 form-->
<form action="#" method="post">
<table border="1" align="center" width="500">
  <tr>
      <td><label for="username">用户名</label></td>
      <td><input type="text" name="username" id="username"></td>
  </tr>
  <tr>
      <td><label for="password">密码</label></td>
      <td><input type="password" name="password" id="password"></td>
  </tr>
  <tr>
      <td><label for="email">Email</label></td>
      <td><input type="email" name="email" id="email"></td>
  </tr>
  <tr>
      <td><label for="name">姓名</label></td>
      <td><input type="text" name="name" id="name"></td>
  </tr>
  <tr>
      <td><label for="tel">手机号</label></td>
      <td><input type="text" name="tel" id="tel"></td>
  </tr>
  <tr>
      <td><label>性别</label></td>
      <td><input type="radio" name="gender" value="male"> 男
          <input type="radio" name="gender" value="female"> 女
      </td>
  </tr>
  <tr>
      <td><label for="birthday">出生日期</label></td>
      <td><input type="date" name="birthday" id="birthday"></td>
  </tr>
  <tr>
      <td><label for="checkcode">验证码</label></td>
      <td><input type="text" name="checkcode" id="checkcode">
          <img src="img/verify_code.jpg">
      </td>
  </tr>
  <tr>
      <td colspan="2" align="center"><input type="submit" value="注册"></td>
  </tr>
</table>
</form>
</body>
</html>

</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3 id="第4节-CSS概述"><a href="#第4节-CSS概述" class="headerlink" title="第4节 CSS概述"></a>第4节 CSS概述</h3><ul>
<li><ol>
<li><p>概念：Cascading Style Sheets 层叠样式表</p>
<ul>
<li><ul>
<li>层叠：多个样式可以作用在同一个html的元素上，同时生效</li>
</ul>
</li>
</ul>
</li>
</ol>
</li>
<li><ol>
<li><p>好处：</p>
<ul>
<li><ol>
<li>功能强大</li>
</ol>
</li>
<li><ol>
<li><p>将内容展示和样式控制分离</p>
<ul>
<li><ul>
<li>降低耦合度。解耦</li>
</ul>
</li>
<li><ul>
<li>让分工协作更容易</li>
</ul>
</li>
<li><ul>
<li>提高开发效率</li>
</ul>
</li>
</ul>
</li>
</ol>
</li>
</ul>
</li>
</ol>
</li>
<li><ol>
<li><p>CSS的使用：CSS与html结合方式</p>
<ul>
<li><ol>
<li><p>内联样式</p>
<ul>
<li><ul>
<li>在标签内使用style属性指定css代码</li>
</ul>
</li>
<li><ul>
<li>如：<div style="color:red;">hello css</div></li>
</ul>
</li>
</ul>
</li>
</ol>
</li>
<li><ol>
<li><p>内部样式</p>
<ul>
<li><ul>
<li>在head标签内，定义style标签，style标签的标签体内容就是css代码</li>
</ul>
</li>
<li><ul>
<li>如：</li>
</ul>
<ul>
<li><style><br>div{<br>color:blue;<br>}
</style><div>hello css</div>
</li>
</ul>
</li>
</ul>
</li>
</ol>
</li>
<li><ol>
<li><p>外部样式</p>
<ul>
<li><ol>
<li>定义css资源文件。</li>
</ol>
</li>
<li><ol>
<li>在head标签内，定义link标签，引入外部的资源文件</li>
</ol>
<ul>
<li><ul>
<li><p>如a.css文件：</p>
<ul>
<li>div{<br>color:green;<br>}<br><link rel="stylesheet" href="css/a.css"><div>hello css</div>
<div>hello css</div></li>
<li><ul>
<li><p>注意：</p>
<ul>
<li><ul>
<li>1、2、3种方式，css作用范围越来越大</li>
</ul>
</li>
<li><ul>
<li>1方式不常用，后期常用2,3</li>
</ul>
</li>
<li><ul>
<li><p>第3种格式可以写为：</p>
<ul>
<li><style>
@import "css/a.css";
</style>

</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ol>
</li>
</ul>
</li>
</ol>
</li>
</ul>
<h3 id="第5节-CSS-选择器"><a href="#第5节-CSS-选择器" class="headerlink" title="第5节 CSS_选择器"></a>第5节 CSS_选择器</h3><ul>
<li><ol>
<li><p>css语法：</p>
<ul>
<li><ul>
<li><p>选择器：筛选具有相似特征的元素</p>
<ul>
<li><ul>
<li><p>格式：</p>
<ul>
<li>选择器 {<br>属性名1:属性值1;<br>属性名2:属性值2;<br>…<br>}</li>
</ul>
</li>
</ul>
</li>
<li><ul>
<li><p>注意：</p>
<ul>
<li><ul>
<li>每一对属性需要使用；隔开，最后一对属性可以不加“;”。</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ol>
</li>
<li><ol>
<li><p>选择器：筛选具有相似特征的元素</p>
<ul>
<li><ul>
<li><p>分类：</p>
<ul>
<li><ol>
<li><p>基础选择器</p>
<ul>
<li><ol>
<li>id选择器：选择具体的id属性值的元素。建议在一个html页面中id值唯一。</li>
</ol>
<ul>
<li><ul>
<li>语法：#id属性值{}</li>
</ul>
</li>
</ul>
</li>
<li><ol>
<li>元素选择器：选择具有相同标签名称的元素。</li>
</ol>
<ul>
<li><ul>
<li>语法： 标签名称{}</li>
</ul>
</li>
<li><ul>
<li>注意：id选择器优先级 高于 元素选择器</li>
</ul>
</li>
</ul>
</li>
<li><ol>
<li>类选择器：选择具有相同的class属性值的元素。</li>
</ol>
<ul>
<li><ul>
<li>语法：.class属性值{}</li>
</ul>
</li>
<li><ul>
<li>注意：类选择器选择器优先级 高于 元素选择器。</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ol>
</li>
<li><p>. 扩展选择器：</p>
<ul>
<li><ol>
<li><p>选择所有元素：</p>
<ul>
<li><ul>
<li>语法： *{}</li>
</ul>
</li>
</ul>
</li>
</ol>
</li>
<li><ol>
<li><p>并集选择器：</p>
<ul>
<li><ul>
<li>选择器1，选择器2{}</li>
</ul>
</li>
</ul>
</li>
</ol>
</li>
<li><ol>
<li><p>子选择器：筛选选择器1元素下的选择器2元素</p>
<ul>
<li><ul>
<li>语法：  选择器1 选择器2{}</li>
</ul>
</li>
</ul>
</li>
</ol>
</li>
<li><ol>
<li><p>父选择器：筛选选择器2的父元素选择器1</p>
<ul>
<li><ul>
<li>语法：  选择器1 &gt; 选择器2{}</li>
</ul>
</li>
</ul>
</li>
</ol>
</li>
<li><ol>
<li><p>属性选择器：选择元素名称，属性名=属性值的元素</p>
<ul>
<li><ul>
<li>语法：  元素名称[属性名=”属性值”]{}</li>
</ul>
</li>
</ul>
</li>
</ol>
</li>
<li><ol>
<li><p>伪类选择器：选择一些元素具有的状态</p>
<ul>
<li><ul>
<li>语法： 元素:状态{}</li>
</ul>
</li>
<li><ul>
<li><p>如： <a></p>
<ul>
<li><ul>
<li><p>状态：</p>
<ul>
<li><ul>
<li>link：初始化的状态</li>
</ul>
</li>
<li><ul>
<li>visited：被访问过的状态</li>
</ul>
</li>
<li><ul>
<li>active：正在访问状态</li>
</ul>
</li>
<li><ul>
<li>hover：鼠标悬浮状态</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ol>
</li>
<li><p>优先级</p>
<ul>
<li>内联样式，优先级1000</li>
<li>id选择器，优先级100</li>
<li>类和伪类，优先级10</li>
<li>元素选择器，优先级1</li>
<li>通配选择器，优先级0</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ol>
</li>
</ul>
<h3 id="第6节-CSS属性"><a href="#第6节-CSS属性" class="headerlink" title="第6节 CSS属性"></a>第6节 CSS属性</h3><ul>
<li><ol>
<li><p>属性</p>
<ul>
<li><ol>
<li><p>字体、文本</p>
<ul>
<li><ul>
<li>font-size：字体大小</li>
</ul>
</li>
<li><ul>
<li>color：文本颜色</li>
</ul>
</li>
<li><ul>
<li>text-align：对其方式</li>
</ul>
</li>
<li><ul>
<li>line-height：行高 </li>
</ul>
</li>
</ul>
</li>
</ol>
</li>
<li><ol>
<li><p>背景</p>
<ul>
<li><ul>
<li>background：</li>
</ul>
</li>
</ul>
</li>
</ol>
</li>
<li><ol>
<li><p>边框</p>
<ul>
<li><ul>
<li>border：设置边框，符合属性</li>
</ul>
</li>
</ul>
</li>
</ol>
</li>
<li><ol>
<li><p>尺寸</p>
<ul>
<li><ul>
<li>width：宽度</li>
</ul>
</li>
<li><ul>
<li>height：高度</li>
</ul>
</li>
</ul>
</li>
</ol>
</li>
<li><ol>
<li><p>盒子模型</p>
<ul>
<li><ul>
<li>margin：外边距</li>
</ul>
</li>
<li><ul>
<li>padding：内边距</li>
</ul>
</li>
<li><ul>
<li>默认情况下，内边距会影响整个盒子的大小。</li>
</ul>
</li>
<li><ul>
<li>box-sizing: border-box;  设置盒子的属性，令width和height就是最终盒子的大小。</li>
</ul>
</li>
<li><ul>
<li>float：浮动</li>
</ul>
<ul>
<li><ul>
<li>left</li>
</ul>
</li>
<li><ul>
<li>right</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ol>
</li>
</ul>
</li>
</ol>
</li>
</ul>
<h3 id="第7节-CSS-案例-注册页面"><a href="#第7节-CSS-案例-注册页面" class="headerlink" title="第7节 CSS_案例-注册页面"></a>第7节 CSS_案例-注册页面</h3><ul>
<li><p>&lt;!DOCTYPE html&gt;<br><html lang="en"><br>  <head></p>
<pre><code>  &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;title&gt;注册页面&lt;/title&gt;
  &lt;style&gt;
      * &#123;
      margin: 0px;
      padding: 0px;
      box-sizing: border-box;
  &#125;

  body &#123;
      background: url(&quot;img/register_bg.png&quot;) no-repeat center;
      padding-top: 25px;
  &#125;

  .rg_layout &#123;
      width: 900px;
      height: 500px;
      border: 8px solid #EEEEEE;
      background-color: white;
      /*让div水平居中*/
      margin: auto;
  &#125;

  .rg_left &#123;
      /* border: 1px solid red; */
      float: left;
      margin: 15px;
  &#125;

  .rg_left&gt;p:first-child &#123;
      color: #FFD026;
      font-size: 20px;
  &#125;

  .rg_left&gt;p:last-child &#123;
      color: #A6A6A6;
      font-size: 20px;
  &#125;

  .rg_center &#123;
      float: left;
      /* border: 1px solid red; */
  &#125;

  .rg_right &#123;
      /* border: 1px solid red; */
      float: right;
      margin: 15px;
  &#125;

  .rg_right&gt;p:first-child &#123;
      font-size: 15px;
  &#125;

  .rg_right p a &#123;
      color: pink;
  &#125;

  .td_left &#123;
      width: 100px;
      text-align: right;
      height: 45px;
  &#125;

  .td_right &#123;
      padding-left: 50px;
  &#125;

  #username,
  #password,
  #email,
  #name,
  #tel,
  #birthday,
  #checkcode &#123;
      width: 251px;
      height: 32px;
      border: 1px solid #A6A6A6;
      /*设置边框圆角*/
      border-radius: 5px;
      padding-left: 10px;
  &#125;

  #checkcode &#123;
      width: 110px;
  &#125;

  #img_check &#123;
      height: 32px;
      vertical-align: middle;
  &#125;

  #btn_sub &#123;
      width: 150px;
      height: 40px;
      background-color: #FFD026;
      border: 1px solid #FFD026;
  &#125;
</code></pre><p>  &lt;/style&gt;<br>  &lt;/head&gt;</p>
  <body>
      <div class="rg_layout">
          <div class="rg_left">
              <p>新用户注册</p>
              <p>USER REGISTER</p>
          </div>
          <div class="rg_center">
              <div class="rg_form">
                  <!--定义表单 form-->
                  <form action="#" method="post">
                      <table>
                          <tr>
                              <td class="td_left"><label for="username">用户名</label></td>
                              <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名">
                              </td>
                          </tr>
                          <tr>
                              <td class="td_left"><label for="password">密码</label></td>
                              <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
                          </tr>
                          <tr>
                              <td class="td_left"><label for="email">Email</label></td>
                              <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
                          </tr>
                          <tr>
                              <td class="td_left"><label for="name">姓名</label></td>
                              <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
                          </tr>
                          <tr>
                              <td class="td_left"><label for="tel">手机号</label></td>
                              <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
                          </tr>
                          <tr>
                              <td class="td_left"><label>性别</label></td>
                              <td class="td_right">
                                  <input type="radio" name="gender" value="male"> 男
                                  <input type="radio" name="gender" value="female"> 女
                              </td>
                          </tr>
                          <tr>
                              <td class="td_left"><label for="birthday">出生日期</label></td>
                              <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期">
                              </td>
                          </tr>
                          <tr>
                              <td class="td_left"><label for="checkcode">验证码</label></td>
                              <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
                                  <img id="img_check" src="img/verify_code.jpg">
                              </td>
                          </tr>
                          <tr>
                              <td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册"></td>
                          </tr>
                      </table>
                  </form>
              </div>
          </div>
          <div class="rg_right">
              <p>已有账号?<a href="#">立即登录</a></p>
          </div>
      </div>
  </body>

</li>
</ul>

      
    </div>
    <footer class="article-footer">
      <a data-url="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AD%E7%AB%A0HTML%E5%92%8CCSS/" data-id="cl403sxre001xf8vu2vzr5f3n" data-title="" class="article-share-link">Share</a>
      
      
      
    </footer>
  </div>
  
    
<nav id="article-nav">
  
    <a href="/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E4%B8%83%E7%AB%A0JavaScript/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          (no title)
        
      </div>
    </a>
  
  
    <a href="/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E4%BA%94%E7%AB%A0JavaWeb/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title"></div>
    </a>
  
</nav>

  
</article>


</section>
        
          <aside id="sidebar">
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Categories</h3>
    <div class="widget">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/C-%E5%B7%A5%E5%85%B7/">C#工具</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/C-%E5%B7%A5%E5%85%B7/">C++工具</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/Mysql/">Mysql</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/blender/">blender</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/linux/">linux</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/manim/">manim</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/spring/">spring</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/vba%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/">vba基础操作</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/%E5%88%9B%E9%80%A0%E6%A8%A1%E5%BC%8F/">创造模式</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/">操作系统</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/">操作系统基础知识</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F%E5%BC%80%E5%8F%91/">操作系统开发</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/%E6%95%B0%E5%AD%A6/">数学</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/">数据结构</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/">数据结构基础知识</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/%E6%A8%A1%E6%9D%BF/">模板</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/">深度学习</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/%E8%8B%B1%E8%AF%AD/">英语</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/%E8%99%9A%E5%B9%BB4/">虚幻4</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BB%84%E6%88%90%E5%8E%9F%E7%90%86/">计算机组成原理</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/">计算机网络</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tags</h3>
    <div class="widget">
      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/notes-on-computer-expertise/tags/C/" rel="tag">C++</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tag Cloud</h3>
    <div class="widget tagcloud">
      <a href="/notes-on-computer-expertise/tags/C/" style="font-size: 10px;">C++</a>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/notes-on-computer-expertise/archives/2022/05/">May 2022</a></li><li class="archive-list-item"><a class="archive-list-link" href="/notes-on-computer-expertise/archives/2022/03/">March 2022</a></li><li class="archive-list-item"><a class="archive-list-link" href="/notes-on-computer-expertise/archives/2022/02/">February 2022</a></li><li class="archive-list-item"><a class="archive-list-link" href="/notes-on-computer-expertise/archives/2022/01/">January 2022</a></li><li class="archive-list-item"><a class="archive-list-link" href="/notes-on-computer-expertise/archives/2021/12/">December 2021</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/notes-on-computer-expertise/2022/05/31/vue/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6%E9%AA%8C%E8%AF%81%E7%A0%81%E6%97%A0%E6%B3%95%E6%98%BE%E7%A4%BA/">(no title)</a>
          </li>
        
          <li>
            <a href="/notes-on-computer-expertise/2022/05/26/%E6%95%B0%E6%8D%AE%E5%BA%93/navicat%E5%AE%89%E8%A3%85/">(no title)</a>
          </li>
        
          <li>
            <a href="/notes-on-computer-expertise/2022/05/25/%E8%99%9A%E5%B9%BB4%E5%BC%95%E6%93%8E%E5%BC%80%E5%8F%91/%E8%99%9A%E5%B9%BB%E5%9B%9B%20mod%E5%88%B6%E4%BD%9C/">(no title)</a>
          </li>
        
          <li>
            <a href="/notes-on-computer-expertise/2022/05/23/python/python%E6%89%B9%E9%87%8F%E7%94%9F%E6%88%90%E6%95%B0%E6%8D%AE/">(no title)</a>
          </li>
        
          <li>
            <a href="/notes-on-computer-expertise/2022/05/23/vba%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C%E7%AC%94%E8%AE%B0/EXCEL%E5%9F%BA%E7%A1%80%E6%95%99%E7%A8%8B/">(no title)</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      
      &copy; 2022 John Doe<br>
      Powered by <a href="https://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>

    </div>
    <nav id="mobile-nav">
  
    <a href="/notes-on-computer-expertise/" class="mobile-nav-link">Home</a>
  
    <a href="/notes-on-computer-expertise/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    


<script src="/notes-on-computer-expertise/js/jquery-3.4.1.min.js"></script>



  
<script src="/notes-on-computer-expertise/fancybox/jquery.fancybox.min.js"></script>




<script src="/notes-on-computer-expertise/js/script.js"></script>





  </div>
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
        tex2jax: {
            inlineMath: [ ["$","$"], ["\\(","\\)"] ],
            skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'],
            processEscapes: true
        }
    });
    MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax();
        for (var i = 0; i < all.length; ++i)
            all[i].SourceElement().parentNode.className += ' has-jax';
    });
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>
</body>
</html>